import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import './Resetname.css'
import { Input } from 'antd-mobile';

export default function Resetname() {
    const navigate = useNavigate()
    const [user, setUser] = useState({
        img: '',
        username: '用户名',
        phone: '13888888888',
        concern: '--',
        collect: '--',
        score: '--',
        coupon: '--'
    })
    return (
        <div className='resetname'>
            <div className="resetname-header">
                <h1>修改昵称</h1>
                <span onClick={() => { navigate(-1) }} className='back'>&lt;</span>
                <span onClick={() => { navigate(-1) }} className='save'>保存</span>
            </div>
            <div className="resetname-content">
                <div className="inp">
                    <Input type="text" placeholder='请输入新的昵称' value={user.username} clearable='true'></Input>
                </div>
            </div>
            <p style={{ marginTop: '10px', marginLeft: '20px' }}>英文字母或汉字，限4-16个字符</p>
        </div>
    )
}
